<!DOCTYPE html>
<html lang="en">

<head>
  <meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1" />
  <meta charset="UTF-8" />
  <title>QQ注册</title>
  <link rel="stylesheet" type="text/css" href="https://qq-web.cdn-go.cn/zc.qq.com/f59c7d00/v3/css/index.css" />
  <link rel="icon" href="https://imgcache.qq.com/qzone/openapi/favicon.ico?t=20130219" type="image/x-icon" />
  <link rel="stylesheet" href="../css/register.css" />
  <script src="../js/axios0.27.2.js"></script>
  <script src="../js/request.js"></script>
  <style>
    .input-warp .new {
      font-size: 12px;
      color: rgb(238, 91, 91);
      line-height: 30px;
      text-indent: 14px;
      display: none;
    }

    .agreement-wrap {
      margin-top: -20px;
    }
  </style>
</head>

<body>
  <div class="video-wrap">
    <video class="video-wrap__video" poster="https://qq-web.cdn-go.cn/zc.qq.com/f59c7d00/v3/img/img-bg@2x.png"
      src="https://qq-web.cdn-go.cn/zc.qq.com/f59c7d00/v3/img/bg-video.mp4" tabindex="-1" airplay="allow"
      x-webkit-airplay="true" playsinline="true" webkit-playsinline="true" x5-playsinline="true"
      x5-video-player-type="h5" x5-video-player-fullscreen="true" autoplay muted playsinline></video>
  </div>
  <div class="header-wrap">
    <div class="header-wrap__inner">
      <div class="header-wrap__hd">
        <a href="javascript:void(0);" class="header-wrap__logo" title="腾讯QQ"></a>
      </div>
      <div class="header-wrap__bd">
        <div class="nav-wrap">
          <div class="nav-wrap__inner">
            <div class="nav-wrap__item">
              <div class="lianghao-wrap">
                <div class="lianghao-wrap__hd">
                  <a class="lianghao-wrap__text lianghao-wrap__text-link" href="https://haoma.qq.com/shop.html#from=zc"
                    onclick="monitor(2759877)" target="_blank">QQ靓号</a>
                </div>
              </div>
            </div>
            <div class="nav-wrap__item">
              <div class="lang-wrap">
                <div class="lang-wrap__innner">
                  <div class="lang-wrap__hd">
                    <span class="nav-wrap__text lang-wrap__text">简体中文<i
                        class="lang-wrap__icon lang-wrap__icon-down"></i></span>
                  </div>
                </div>
              </div>
            </div>
            <div class="nav-wrap__item">
              <span class="nav-wrap__text" data-bind="click: feedback">意见反馈</span>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="main">
    <h2>欢迎注册QQ</h2>
    <p>每一天，乐在沟通。</p>
    <form class="input-warp">
      <input type="text" placeholder="账号" id="account" />
      <span class="new">用户名不能为空</span>
      <input type="password" name="" placeholder="密码" id="password"
        style="margin-top: 10px;display: block;margin-top: 20px;" />
      <span class="new" style="color: rgb(96, 147, 96);">不能包括空格</span>
      <span class="new">长度为8-16个字符</span>
      <span class="new">必须包含字母、符号、数字中至少两种</span>
      <span class="new">密码不能为空</span><br><br>
      <div class="agreement-wrap">
        <div class="agreement-wrap__inner">
          <div class="agreement-wrap__hd">
            <input class="agreement-wrap__icon agreement-wrap__icon-input" type="checkbox" name="agree" id="agree" />
            <i class="agreement-wrap__icon"></i>
          </div>
          <div class="agreement-wrap__bd">
            <span class="agreement-wrap__text">我已阅读并同意<a href="https://ti.qq.com/agreement/index.html"
                class="text-link">服务协议</a>和<a href="https://ti.qq.com/doc/redirect/qq-privacy-guild"
                class="text-link">QQ隐私保护指引</a></span>
          </div>
        </div>
      </div>
      <button id="regipt" type="button">立即注册</button>
    </form>
    <div class="footer">
      Copyright <span class="footer__text-copryright">©</span><span class="footer__text-date">1998-
        <script>
          document.write(new Date().getFullYear());
        </script>
        2022
      </span>Tencent All Rights Reserved.
    </div>
  </div>
  <script>
    let ipts = document.querySelectorAll("input");
    let btn = document.querySelector("#regipt");
    let spans = document.querySelectorAll('.input-warp .new');
    //单选框
    ipts[2].onclick = function () {
      let i = this.nextElementSibling;
      if (i.classList.contains('agreement-wrap__icon-checked')) {
        i.classList.remove('agreement-wrap__icon-checked')
      } else {
        i.classList.add('agreement-wrap__icon-checked');
      }
    }
    //用户名正则
    ipts[0].onfocus = function () {
      spans[0].style.display = "none";
    }
    ipts[0].onblur = function () {
      if (this.value == "") {
        spans[0].style.display = "block";
      } else {
        spans[0].style.display = "none";
      }
    }
    //密码正则
    ipts[1].onfocus = function () {
      spans[1].style.display = "block";
      spans[2].style.display = "block";
      spans[3].style.display = "block";
      spans[4].style.display = "none";
    }
    ipts[1].oninput = function () {
      if (/\s+/.test(this.value)) {
        spans[1].style.color = "rgb(238, 91, 91)";
      } else {
        spans[1].style.color = "rgb(96, 147, 96)";
      }
      if (/^.{8,16}$/.test(this.value)) {
        spans[2].style.color = "rgb(96, 147, 96)";
      } else { spans[2].style.color = "rgb(238, 91, 91)"; }
      let reg = /((?=.*\d)(?=.*\D)|(?=.*[a-zA-Z])(?=.*[^a-zA-Z]))(?!^.*[\u4E00-\u9FA5].*$)^\S{2,16}$/;
      if (reg.test(this.value)) {
        spans[3].style.color = "rgb(96, 147, 96)";
      } else {
        spans[3].style.color = "rgb(238, 91, 91)";
      }
    }
    ipts[1].onblur = function () {
      setTimeout(() => {
        if (this.value == '') {
          spans[2].style.display = "none";
          spans[3].style.display = "none";
          spans[4].style.display = 'block';
        } else {
          spans[4].style.display = "none";
        }
        spans.forEach((v) => {
          if (v.style.color == "rgb(96, 147, 96)") {
            v.style.display = 'none';
          }
        })
      }, 100)

    }
    //注册
    btn.onclick = function () {
      spans = Array.from(spans);
      spans.some((v) => {
        if (v.style.color == "rgb(238, 91, 91)") {
          alert("格式错误");
          return false;
        }
      })
      if (!ipts[2].checked) {
        alert("请先同意服务条款和隐私政策");
        return false;
      }
      if (spans.every((v) => v.style.color = "rgb(96, 147, 96)") && ipts[2].checked) {
        let userName = ipts[0].value;
        let password = ipts[1].value;
        myAxios.post(regAPI, { userName, password }).then((r) => {
          if (r.data.code == 1) {
            alert("注册成功");
            localStorage.setItem("userName", userName);
            localStorage.setItem("password", password);
            localStorage.setItem("token", r.data.data);
            location.href = "../index.html";
          }
        });
      }

    };
  </script>
</body>

</html>